/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-radio-neutral-content-color: CanvasText;
        --highcontrast-radio-neutral-content-color-hover: CanvasText;
        --highcontrast-radio-neutral-content-color-down: CanvasText;
        --highcontrast-radio-neutral-content-color-focus: CanvasText;
        --highcontrast-radio-button-border-color-default: ButtonText;
        --highcontrast-radio-button-border-color-hover: Highlight;
        --highcontrast-radio-button-border-color-down: ButtonText;
        --highcontrast-radio-button-border-color-focus: Highlight;
        --highcontrast-radio-emphasized-accent-color: ButtonText;
        --highcontrast-radio-emphasized-accent-color-hover: Highlight;
        --highcontrast-radio-emphasized-accent-color-down: ButtonText;
        --highcontrast-radio-emphasized-accent-color-focus: Highlight;
        --highcontrast-radio-button-checked-border-color-default: Highlight;
        --highcontrast-radio-button-checked-border-color-hover: Highlight;
        --highcontrast-radio-button-checked-border-color-down: Highlight;
        --highcontrast-radio-button-checked-border-color-focus: Highlight;
        --highcontrast-radio-disabled-content-color: GrayText;
        --highcontrast-radio-disabled-border-color: GrayText;
        --highcontrast-radio-focus-indicator-color: CanvasText;
    }

    #button:after {
        forced-color-adjust: none;
    }
}

:host {
    vertical-align: top;
    min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
    max-inline-size: 100%;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
}

:host(:active) #button:before {
    border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
}

:host(:active[checked]) #input + #button:before {
    border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
}

:host(:active) #label {
    color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)));
}

:host(:focus-visible) #button:before {
    border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
}

:host(:focus-visible) #button:after {
    border-style: solid;
    border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
    border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
    inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
    block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
}

:host(:focus-visible[checked]) #input + #button:before {
    border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
}

:host(:focus-visible) #label {
    color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
}

:host([readonly]) #input:read-only {
    cursor: auto;
}

:host([readonly]) #button {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    position: fixed;
    inset-block-end: 100%;
    inset-inline-end: 100%;
}

:host([readonly][checked][disabled]) #input ~ #label,
:host([readonly][disabled]) #input ~ #label,
:host([readonly]) #label {
    color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
    margin-inline-start: 0;
}

:host([emphasized][checked]) #input + #button:before {
    border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color)));
}

@media (hover: hover) {
    :host(:hover) #button:before {
        border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
    }

    :host([checked]:hover) #input + #button:before {
        border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
    }

    :host(:hover) #label {
        color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
    }

    :host([emphasized][checked]:hover) #input + #button:before {
        border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover)));
    }
}

:host([emphasized]:active[checked]) #input + #button:before {
    border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down)));
}

:host([emphasized]:focus-visible[checked]) #input + #button:before {
    border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus)));
}

:host([checked][disabled]) #input + #button:before,
:host([disabled]) #input + #button:before {
    border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color)));
}

:host([checked][disabled]) #input ~ #label,
:host([disabled]) #input ~ #label {
    color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color)));
}

#input {
    font-family: inherit;
    font-size: 100%;
    line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: visible;
}

:host([disabled]) #input {
    cursor: default;
}

:host([checked]) #input + #button:before {
    border-width: calc(var(--spectrum-radio-button-control-size) / 2 - var(--spectrum-radio-button-selection-indicator) / 2);
    border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
}

#input:focus-visible + #button:after {
    border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
    border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
    inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
    block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2);
    border-style: solid;
}

#label {
    text-align: start;
    font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
    color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
    line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
    transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
    margin-block-start: var(--spectrum-radio-label-top-to-text);
    margin-block-end: var(--spectrum-radio-label-bottom-to-text);
    margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control));
}

#label:lang(ja),
#label:lang(ko),
#label:lang(zh) {
    line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
}

#button {
    box-sizing: border-box;
    inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
    block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
    flex-grow: 0;
    flex-shrink: 0;
    margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control));
    position: relative;
}

#button:before {
    z-index: 0;
    content: "";
    box-sizing: border-box;
    inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
    block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
    background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
    border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
    border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
    transition:
        border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out,
        box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
    border-style: solid;
    border-radius: 50%;
    display: block;
    position: absolute;
}

#button:after {
    content: "";
    transition:
        opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out,
        margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out;
    border-radius: 50%;
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-50%);
}

:host:dir(rtl) #button:after,
:host([dir="rtl"]) #button:after {
    transform: translateX(50%) translateY(-50%);
}
